<template>
  <div class="app-container">
    <div class="footer">
      <div class="util">
        <el-button type="primary" @click="bindRefreshNode(0)">
          <el-icon><Refresh /></el-icon>
          更新节点
        </el-button>
        <el-button type="danger" @click="bindRefreshNode(1)">
          <el-icon><Refresh /></el-icon>
          强制更新节点
        </el-button>
        <el-button type="primary" @click="bindClearNode">
          <el-icon><Delete /></el-icon>
          清除失效节点
        </el-button>
      </div>
      <div class="table-inner">
        <el-table class="table" v-loading="loading" :data="list" style="width: 100%" border>
          <template #empty>
            <el-empty description="暂无数据" />
          </template>
          <el-table-column prop="node" label="系统节点" min-width="120">
            <template #default="scope">
              <div v-if="scope.row.type == 1">{{ scope.row.node }}</div>
              <div v-if="scope.row.type == 2" v-html="scope.row.node"></div>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="节点名称" align="center" />
          <el-table-column prop="update_time" label="更新时间" align="center" />
          <el-table-column prop="is_auth" label="节点状态" align="center">
            <template #default="scope">
              <el-switch
                v-model="scope.row.is_auth"
                inline-prompt
                :active-value="1"
                :inactive-value="0"
                active-text="启用"
                inactive-text="禁用"
                :disabled="auth && !auth.modify"
                @change="changeStatus(scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElMessageBox, ElMessage, FormInstance, ElNotification } from 'element-plus'
import { nextTick, onMounted, reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { nodeList, modify, refreshNode, clearNode } from '@/api/admin'

const loading = ref(true)
const list = ref()
const total = ref(0)
const query = reactive({
  page: 1,
  limit: 10,
})
const auth = ref()
const getList = () => {
  loading.value = true
  nodeList(query).then((res) => {
    if (res.code == 200) {
      auth.value = res.data.auth
      list.value = res.data.data
      total.value = res.data.count
    }
    loading.value = false
  })
}
const handleSizeChange = (val) => {
  query.page = 1
  query.limit = val
  getList()
}
const handleCurrentChange = (val) => {
  query.page = val
  getList()
}

const changeStatus = (row) => {
  ElMessageBox.confirm(
    `确定要${!row.is_auth ? '关闭' : '开启'} ${row.title} 节点吗？`,
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      modify({
        id: row.id,
        field: 'is_auth',
        value: row.is_auth,
      }).then((res) => {
        if (res.code == 200) {
          ElNotification({
            title: `${!row.is_auth ? '关闭' : '开启'}成功`,
            message: res.msg,
            type: 'success',
          })
        } else {
          if (row.is_auth == 0) row.is_auth = 1
          else if (row.is_auth == 1) row.is_auth = 0
        }
      })
    })
    .catch(() => {
      if (row.is_auth == 0) row.is_auth = 1
      else if (row.is_auth == 1) row.is_auth = 0
    })
}

const bindRefreshNode = (force) => {
  refreshNode({
    force: force,
  }).then((res) => {
    if (res.code == 200) {
      ElNotification({
        title: res.data,
        message: res.msg,
        type: 'success',
      })
      getList()
    }
  })
}
const bindClearNode = () => {
  clearNode({}).then((res) => {
    if (res.code == 200) {
      ElNotification({
        title: res.data,
        message: res.msg,
        type: 'success',
      })
      getList()
    }
  })
}

nextTick(() => {
  getList()
})
</script>

<style scoped lang="scss">
@import './index';
</style>
